<template>
	<view class="">
		<view class="card">
			<view class="">
				{{type=="2"?"信用卡":"磁条卡"}}
			</view>
			<view class="no">
				**** **** **** ****
			</view>
			<view class="name">
				持卡人:{{name}}
			</view>
		</view>

		<view class="card-list" @click="goCardList()">
			我的银行卡
		</view>
		<view class="form-wrapper">
			<view class="row">
				<view class="label">姓名</view>
				<view>{{name}}</view>
			</view>
			<view class="row">
				<view class="label">身份证号</view>
				<view>{{idCardNo}}</view>
			</view>
			<view class="row">
				<view class="label">选择支付公司</view>
				<picker @change="bindPickerChange" mode="selector" :value="index" :range="array" :range-key="`name`">
					<view class="right">
						{{acqName}}
						<image class="ico-arrow-right"
							src="https://jhl-pay.oss-cn-shenzhen.aliyuncs.com/agent/ico-arrow-right.png"
							mode="widthFix">
						</image>
					</view>
				</picker>
				<!-- <input v-model="formData.cardNo" :placeholderStyle="placeholderStyle" placeholder="请选择支付公司"
					disabled="true" class="value" @click="showPop" /> -->

			</view>

			<view class="row">
				<view class="label">银行卡号</view>
				<input v-model="formData.cardNo" type="number" :placeholderStyle="placeholderStyle" :maxlength="19"
					@input="noChange" placeholder="请输入银行卡号" class="value" />
			</view>



			<view class="row ">
				<view class="label">手机号</view>
				<input v-model="formData.accountMobileNo" :placeholderStyle="placeholderStyle" placeholder="请输入手机号"
					class="value" />
				<view class="line"></view>
				<view @click="sendCode()" :disabled="isSend" size="mini" class="smscode">
					{{ buttonText }}
				</view>
			</view>
			<view class="row border-none">
				<view class="label">验证码</view>
				<input v-model="formData.smsCode" type="number" class="value" placeholder="请输入验证码" :maxlength="6" />


			</view>
		</view>
		<button @click="submitEvent" class="btn">确定</button>
		<view class="tip" v-if="type=='2'">
			提额：提升单笔额度和当日出款额度
		</view>

		<uni-popup ref="popup" type="bottom" :mask-click="false" class="popup">
			<view class="popup-content">



			</view>

		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		showToast
	} from "@/utils/toast";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		onlyNumberReg,
		onlyCnReg
	} from "@/utils/regExp";
	import {
		uploadImg,
		getOsssSignature
	} from '@/utils/upload';
	import {
		queryBankCardInfo,
		queryBankName,
		channelQuery,
		queryCardCode
	} from "@/api/common";
	import {
		useStore
	} from "@/store";
	import SelectAccountBank from '@/components/select-account-bank/index.vue';
	import {
		bindBankCard,
		queryAthorization
	} from "@/api/mine";
	// import useVerifyCode from "@/hook/useVerifyCode";
	const store = useStore();
	/** 获取主行列表回调 */
	let bankNameList = ref([]);
	const name = ref(null)
	const idCardNo = ref(null)
	const acqName = ref("请选择支付公司")




	function getBankNameDataFn(data) {
		bankNameList.value = [];
		data.forEach(item => {
			bankNameList.value.push(item.bankName);
		});
	}

	function selectAccountBankCallback(data) {
		console.log('选择开户行回调=>', data);

		formData.value.bankName = data.bankName;
		formData.value.bankId = data.bankId;
		selectAccountBankClose()
	}
	// 取消关闭弹框
	const selectAccountBankClose = () => {
		childRef.value.closeDialog();
	}
	const childRef = ref(null);
	// OSS签名
	let ossConfig = ref({});
	// 提示文字样式
	const placeholderStyle = "color: #999999;";
	/** 选择开户地址 S */
	let showSelectAccountBank = ref(true);
	// 表单数据
	let formData = ref({
		settleBankCardImg: "", // 银行卡照片
		accountName: name.value, // 账户名称
		cardNo: "", // 银行卡号
		bankName: "", // 开户主行
		bankId: '',
		defaultCard: 0, // 是否默认账户,
		oemUserNo: 'BU100002',
		accountMobileNo: "",
		userId: store.userInfo.userId,
		bankType: "XYK",
		smsCode: "",
		acqChannelNo: ''
	});
	let smsFormData = ref({
		settleBankCardImg: "", // 银行卡照片
		accountName: name.value, // 账户名称
		cardNo: "", // 银行卡号
		bankName: "", // 开户主行
		bankId: '',
		defaultCard: 0, // 是否默认账户,
		oemUserNo: 'BU100002',
		accountMobileNo: "",
		userId: store.userInfo.userId,
		bankType: "XYK",
		acqChannelNo: ''
	});
	// 当前商户
	const type = ref(null)

	let array = ref([]);
	onLoad(async (option) => {

		if (option) {
			type.value = option.type;
			formData.value.bankType = (type.value == "2") ? "XYK" : "MC";
			smsFormData.value.bankType = (type.value == "2") ? "XYK" : "MC";
			console.log("formData.value.bankType=" + formData.value.bankType)
			uni.setNavigationBarTitle({
				title: type.value == "2" ? '信用卡认证' : '磁条卡认证' // 设置的新标题
			});
		}

		authorization();
		getChannels();
	});
	// 是否已发送验证码
	let isSend = ref(false);
	// 倒计时
	let seconds = ref(60);
	const buttonText = ref("发送验证码");

	function sendCode() {
		smsFormData.value.cardNo = formData.value.cardNo;
		smsFormData.value.accountMobileNo = formData.value.accountMobileNo;
		console.log("smsFo=" + smsFormData)
		if (!smsFormData.value.cardNo) {
			showToast("请输入银行卡号");
			return;
		}

		if (!smsFormData.value.accountMobileNo) {
			showToast("请输入预留手机号");
			return;
		}

		if (!smsFormData.value.acqChannelNo) {
			showToast("请选择支付公司");
			return;
		}
		queryCardCode(smsFormData.value).then(() => {
			showToast(`发送验证码成功`, "success");
			isSend.value = true;
			buttonText.value = seconds.value + "s";
			let timer = setInterval(() => {
				if (seconds.value <= 0) {
					buttonText.value = "发送验证码";
					clearInterval(timer);
					timer = null;
					isSend.value = false;
					seconds.value = 60;
				} else {
					buttonText.value = seconds.value-- + "s";
				}
			}, 1000);
		}).catch((error) => {
			showToast(error.data.message);
		});
	}

	function getChannels() {
		channelQuery().then((res) => {
				console.log("获取通道=" + JSON.stringify(res))
				array.value = res;
				// let channelInfomation = channel.value
				// // 存储通道信息
				// store.setData({
				// 	channelInfomation,
				// });
				// uni.setStorageSync("channelInfomation", channelInfomation);
			})
			.catch((err) => {
				console.log("err-err", err.data.code)

			});
	}

	function bindPickerChange(e) {
		// console.log("e=" + JSON.stringify(array._rawValue))
		formData.value.acqChannelNo = array._rawValue[e.detail.value].channelNo;
		smsFormData.value.acqChannelNo = array._rawValue[e.detail.value].channelNo;
		acqName.value = array._rawValue[e.detail.value].name;
	}

	function authorization() {
		queryAthorization(store.userInfo.userId).then((res) => {
				// console.log("res-res", res)
				name.value = res.contactName;
				idCardNo.value = res.settleIdCard;
				formData.value.accountName = name.value;
				smsFormData.value.accountName = name.value;
			})
			.catch((error) => {
				showToast(error.data.message || error.data.error);
			});
	}
	// 是否提交中
	let loading = ref(false);
	// 提交表单
	function submitEvent() {
		console.log("formData.value", formData.value)
		if (loading.value) {
			return;
		}

		// if (!formData.value.accountName) {
		// 	showToast("请输入账户名称");
		// 	return;
		// }
		if (!formData.value.cardNo) {
			showToast("请输入银行卡号");
			return;
		}
		// if (!formData.value.bankName) {
		// 	showToast("请选择开户主行");
		// 	return;
		// }
		if (!formData.value.accountMobileNo) {
			showToast("请输入预留手机号");
			return;
		}
		if (!formData.value.smsCode) {
			showToast("请输入验证码");
			return;
		}
		// if (!formData.value.defaultCard && formData.value.defaultCard !== 0) {
		// 	showToast("请选择账户类型");
		// 	return;
		// }
		console.log("formData.value", formData.value)
		bindBankCard(formData.value)
			.then((res) => {
				showToast("添加成功", "success");
				setTimeout(() => {
					// uni.navigateTo({
					// 	url: "/authentication/realBank/index",
					// });
					uni.navigateBack()
				}, 1500);
			})
			.catch(() => {
				loading.value = false;
			});
		// }
	}
	// 姓名
	function nameChange(ev) {
		childRef.value.openDialog();
	}

	// 银行卡号
	function noChange(ev) {
		formData.value.cardNo = onlyNumberReg(ev.detail.value);
	}

	function goCardList() {
		uni.navigateTo({
			url: "/authentication/creditBank/index?type=" + type.value,
		});
	}
	// 上传银行卡
	function uploadBankCard() {
		console.log("888888888")
		uploadImg(ossConfig.value)
			.then((res) => {
				formData.value.settleBankCardImg = res;

				// 识别银行卡
				return queryBankCardInfo({
					params: {
						url: res,
					},
				});
			})
			.then((res) => {
				const {
					bankName,
					cardNum
				} = res;
				formData.value.cardNo = cardNum;
				formData.value.bankName = bankName
				getBankId(bankName)

			})
	}
	// 默认账户
	const defaultChange = (val) => {
		console.log("val", val.detail.value)
		formData.value.defaultCard = val.detail.value ? 1 : 0
	}
	// 获取银行id
	const getBankId = (val) => {
		queryBankName({
				params: {
					bankName: val,
				},
			})
			.then((res) => {
				console.log("8888888", res)
				formData.value.bankId = res
			})
			.catch(() => {

			});
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>